<script setup>
import { ref } from 'vue'
import { phoneApi,captchaApi } from '../../../services'

const phone = ref()
const captcha = ref('')
let timer = null
const countTime = ref(10)
const captchaValue = ref('获取验证码')
const isTimer = ref(false)

const getCaptcha = async() => {
    if(phone.value) {
        if(phone.value.toString().length !== 11) {
            return uni.showToast({
                title:'手机格式错误',
                icon:'error'
            })
        }
        timer = setInterval(() => {
            countTime.value --
            captchaValue.value = countTime.value
            isTimer.value = true
            if(countTime.value === 0 ){
                clearInterval(timer)
                captchaValue.value = '获取验证码'
                countTime.value = 10
                isTimer.value = false
                return
            }
        },1000)
        const res = await captchaApi(phone.value)
        console.log(res)
        if(res.code === 200 ) {
            uni.showToast({
                title:'获取验证码成功' ,
                icon:'success'
            })
        }else {
            uni.showToast({
                title:'获取验证码失败',
                icon:'error'
            })
        }
    }else{
        uni.showToast({
            title:'请输入手机号',
            icon:'error'
        })
    }
}




const submit = async () => {
    if(phone.value && captcha.value) {
        const res = await phoneApi(phone.value,captcha.value)
        console.log(res)
        if(res.code === 200) {
            uni.showToast({
                title:'登陆成功',
                icon:'success'
            })
            uni.switchTab({
                url:'/pages/index/index'
            })
            uni.setStorageSync('cuurCookie',res.cookie)
        }else {
            uni.showToast({
                title:'登陆失败',
                icon:'error'
            })
        }




    }else {
        uni.showToast({
                title:'请输入手机号和密码',
                icon:'error'
            })
    }
}










</script>

<template>
    <view class="email-login">
        <view class="row">
            <input type="tel" v-model="phone" placeholder="请输入手机号">
        </view>
        <view class="row captcha">
            <input type="text" v-model="captcha" placeholder="请输入验证码">
            <button type="primary" @click="getCaptcha" :disabled="countDown > 0">{{ captchaValue }}</button>
        </view>
		<button @click="submit" type="primary">登录</button>
    </view>
</template>

<style lang="scss" scoped>
.row{
    margin-bottom: 10px;
    input{
        height: 40px;
        width: 100%;
        border-radius: 10px;
        border: 1px solid #eee;
        padding: 0 20px;
    }
    button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    color: #ffffff;
    border: none;
    border-radius: 10rpx;
  }
}
.captcha {
    display: flex;
    input {
        flex: 1;
    }
    button {
        width: 240rpx;
        margin-left: 20rpx;
        &:disabled {
        opacity: 0.7;
        }
    }

}
</style>